<template>
  <view class="package-page">
    <!-- 顶部导航 -->

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-form">
        <view class="search-input-wrap">
          <u-icon name="search" size="35" color="#999" class="search-icon"></u-icon>
          <input 
            class="search-input" 
            v-model="searchKey" 
            placeholder="搜索套餐名称"
            @confirm="handleSearch"
          />
        </view>
        <button class="search-btn" @click="handleSearch">
          <text class="btn-text">搜索</text>
        </button>
        <button class="reset-btn" @click="handleReset">
          <text class="btn-text">重置</text>
        </button>
      </view>
    </view>

    <!-- 新增按钮 -->
    <view class="add-btn-wrap">
      <button class="add-btn" @click="openAddModal">
        <u-icon name="plus" color="#fff" size="16" class="btn-icon"></u-icon>
        <text class="btn-text">新增套餐</text>
      </button>
    </view>

    <!-- 套餐列表 -->
    <view class="package-list" style="padding-bottom: 60rpx;">
      <view 
        class="package-item" 
        v-for="(item, index) in packageList" 
        :key="item.id"
      >
        <view class="item-info">
          <view class="package-name">{{ item.package_name }}</view>
        </view>
        <view class="item-ops">
          <button class="edit-btn" @click.stop="openEditModal(index)">
            <u-icon name="edit-pen"  color="#fff" size="24" class="action-icon"></u-icon>
          </button>
          <button style="margin-left: 20rpx;" class="delete-btn" @click.stop="handleDelete(index)">
            <u-icon name="trash" color="#fff" size="24" class="action-icon"></u-icon>
          </button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="packageList.length === 0" class="empty-state">
        <text class="empty-text">暂无套餐数据，点击"新增套餐"添加</text>
      </view>
    </view>

    <!-- 新增/编辑弹窗 -->
    <view class="modal-mask" v-if="isModalVisible">
      <view class="modal-container">
        <view class="modal-header">
          <text class="modal-title">{{ isEdit ? '编辑套餐' : '新增套餐' }}</text>
          <view class="close-modal" @click="closeModal">
            <u-icon name="close" size="28rpx" color="#999"></u-icon>
          </view>
        </view>
        <view class="modal-body">
          <view class="form-group">
            <label class="form-label">学校</label>
            <view class="select-school" @click="openSchoolSelect">
              <text class="select-value">{{ selectedSchool.school_name || '请选择学校' }}</text>
              <u-icon name="arrow-down" size="24rpx" color="#999" class="select-arrow"></u-icon>
            </view>
            
            <!-- 学校选择弹窗 -->
            <view class="school-select-mask" v-if="isSchoolSelectVisible">
              <view class="school-select-container" style="padding-bottom: 50rpx;">
                <view class="select-header">
                  <text class="select-title">选择学校</text>
                  <view class="close-select" @click="closeSchoolSelect">
                    <u-icon name="close" size="24rpx" color="#999"></u-icon>
                  </view>
                </view>
                <view class="school-list">
                  <view 
                    class="school-item" 
                    v-for="(school, index) in schools" 
                    :key="index"
                    :class="{'selected-school': school.school_id === selectedSchool.school_id}"
                    @click="selectSchool(school)"
                  >
                    {{ school.school_name }}
                  </view>
                </view>
              </view>
            </view>
          </view>
          
          <view class="form-group">
            <label class="form-label">套餐名称</label>
            <input 
              class="form-input" 
              v-model="currentPackage.package_name" 
              placeholder="请输入套餐名称"
            />
          </view>
		  <view class="form-group">
		    <label class="form-label">套餐内容</label>
		 
			<textarea style="height: 250rpx;padding-top: 20rpx;" class="form-input"  v-model="currentPackage.package_content" 
		      placeholder="请输入套餐内容"></textarea>
		  </view>
          <view style="padding: 35rpx 0;">
			  <button class="confirm-btn" @click="batchHandle">
			    <text class="btn-text">确 认</text>
			  </button>
		  </view>
         
        </view>
       
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      packageList: [],
      isModalVisible: false,
      isEdit: false,
      currentPackage: { package_name: '',school_id:'',package_content:''},
      selectedSchool: { city_id: '', city_name: '' },
      isSchoolSelectVisible: false,
      schools: [],
	  list:[],
	  page:1,
	  limit:10,
	  total:0,
	  school_name:''
    }
  },

  onLoad() {
  	this.getPackage()
	this.getCity()
  },
  onReachBottom() {
  	console.log('876868678567',this.total)
	if( this.total > this.packageList.length  ){
		this.page ++
		this.getPackage()
	}
  },
  methods: {
	async getCity(){
		const res = await this.$api.get('/School/index','',true)
		if(res.data.code === 200) {
			this.schools = res.data.data
		}
		
	},
	async getPackage(){
		uni.showLoading({
			title:'加载中...'
		})
		const params = {
			page:this.page,
			limit:this.limit,
			package_name:this.searchKey
		}
		const res = await this.$api.get('/Package/index',params,true)
		if(res.data.code === 200) {
			this.packageList = this.packageList.concat(res.data.data)
			this.total = res.data.total
			uni.hideLoading()
		}
	},
    closePage() {
      uni.navigateBack();
    },
    handleSearch() {
      console.log('搜索关键词:', this.searchKey);
	  this.packageList = []
	  this.getPackage()
    },
    handleReset() {
      this.searchKey = '';
	  this.page = 1
	  this.packageList = []
	  this.getPackage()
    },
    openAddModal() {
      this.isEdit = false;
      this.currentPackage = { package_name: '', school_id: '',school_name:'' };
      this.selectedSchool = { city_id: '', city_name: '',package_content:'' };
      this.isModalVisible = true;
    },
    openEditModal(index) {
      this.isEdit = true;
      this.currentPackage = this.packageList[index] ;
	  console.log('dasdadada',index)
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
      this.isSchoolSelectVisible = false;
    },
    openSchoolSelect() {
      this.isSchoolSelectVisible = true;
    },
    closeSchoolSelect() {
      this.isSchoolSelectVisible = false;
    },
    selectSchool(school) {
      this.selectedSchool = school;
	  this.currentPackage.school_id = school.school_id
	  this.selectedSchool.school_name = school.school_name
	  console.log('大苏打大苏打',school)
      this.isSchoolSelectVisible = false;
    },
    savePackage() {
      if (!this.selectedSchool.school_id) {
        uni.showToast({ title: '请选择学校', icon: 'none' });
        return;
      }
      
      if (!this.currentPackage.package_name) {
        uni.showToast({ title: '请输入套餐名称', icon: 'none' });
        return;
      }
      
      
      const newPackage = {
        package_name: this.currentPackage.package_name,
        school_id: this.selectedSchool.city_id
      };
      
      if (this.isEdit) {
        const index = this.packageList.findIndex(item => item.id === newPackage.id);
        if (index !== -1) {
          this.packageList.splice(index, 1, newPackage);
          uni.showToast({ title: '编辑成功', icon: 'success' });
        }
      } else {
        this.packageList.unshift(newPackage);
        uni.showToast({ title: '新增成功', icon: 'success' });
      }
      
      this.isModalVisible = false;
    },
    handleDelete(index) {
	  this.currentPackage.package_id = this.packageList[index].package_id
      uni.showModal({
        title: '确认删除',
        content: `确定要删除"${this.packageList[index].package_name}"吗？`,
        success: async (res) => {
          if (res.confirm) {
			  const res = await this.$api.post('/package/delete',{package_id:this.currentPackage.package_id},true)
			  if(res.data.code === 200) {
				  this.packageList.splice(index, 1);
				  uni.showToast({ title: '删除成功', icon: 'success' });
				  this.getPackage()
			  }
          }
        }
      });
    },
    viewDetail(item) {
      uni.showModal({
        title: '套餐详情',
        content: `学校：${item.school_name}\n名称：${item.pakeage_name}`,
        showCancel: false
      });
    },
    async batchHandle() {
	  let url = !this.isEdit ?'/package/save':'/package/update'
	  if(!this.isEdit){
		  delete this.currentPackage.package_id
	  }
      const res = await this.$api.post(url,this.currentPackage,true)
	  if(res.data.code === 200) {
		  this.isModalVisible = false
		  this.packageList = []
		  this.getPackage()
		  this.currentPackage = { school_id: '', school_name:'', package_name: '',package_content:'' };
	  }	
    },
    getSchoolColor(school) {
      const colorMap = {
        '贵州职业技术学院': 'school-blue',
        '贵阳职业技术学院': 'school-green',
        '贵州财经大学（花溪大学城）': 'school-purple',
        '贵州交通职业技师学院（中专）': 'school-yellow',
        '贵阳经贸学校（老阳关校区）': 'school-red',
        '会展大市场': 'school-orange'
      };
      return colorMap[school] || 'school-gray';
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/uni_modules/uview-ui/index.scss";
.package-page {
  background-color: #f6f7fb;
  min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.back-btn, .right-empty {
  width: 40rpx;
  height: 40rpx;
}
.title {
  font-size: 36rpx;
  font-weight: 500;
}

/* 搜索区域 */
.search-section {
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.search-form {
  display: flex;
  align-items: center;
  gap: 16rpx;
}
.search-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  height: 72rpx;
  background-color: #f5f7fa;
  border-radius: 10rpx;
  padding: 0 20rpx;
}
.search-icon {
  margin-right: 12rpx;
}
.search-input {
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  border: none;
  background-color: transparent;
}
.search-btn, .reset-btn {
  min-width: 120rpx;
  height: 72rpx;
  line-height: 72rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.search-btn {
  background-color: #3498db;
  color: #fff;
}
.reset-btn {
  background-color: #f39c12;
  color: #fff;
}
.btn-text {
  color: #fff;
}

/* 新增按钮 */
.add-btn-wrap {
  padding: 0 30rpx 20rpx;
  display: flex;
  justify-content: flex-end;
}
.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2ecc71;
  color: #fff;
  padding: 0 30rpx;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 12rpx rgba(46, 204, 113, 0.3);
  border: none;
}
.btn-icon {
  margin-right: 15rpx;
}

/* 套餐列表 */
.package-list {
  margin: 0 30rpx;
}
.package-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 24rpx;
  margin-bottom: 16rpx;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}
.package-item:active {
  transform: scale(0.98);
}
.item-info {
  flex: 1;
  margin-right: 20rpx;
}
.school-tag {
  display: inline-block;
  padding: 4rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  // color: #fff;
  margin-bottom: 12rpx;
}
.school-blue { background-color: #3498db; }
.school-green { background-color: #2ecc71; }
.school-purple { background-color: #9b59b6; }
.school-yellow { background-color: #f39c12; }
.school-red { background-color: #e74c3c; }
.school-orange { background-color: #e67e22; }
.school-gray { background-color: #95a5a6; }
.package-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 8rpx;
}
.package-price {
  font-size: 26rpx;
  color: #7f8c8d;
}
.item-ops {
  display: flex;
  // flex-direction: column;
  // gap: 12rpx;
  align-content: center;
}
.edit-btn, .delete-btn {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}
.edit-btn {
  background-color: #3498db;
  color: #fff;
}
.delete-btn {
  background-color: #e74c3c;
  color: #fff;
}
.action-icon {
  color: #fff;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

/* 底部操作 */
.bottom-ops {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  background-color: #fff;
  margin: 24rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.close-btn, .confirm-btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  font-size: 30rpx;
  border: none;
}
.close-btn {
  background-color: #f5f7fa;
  color: #7f8c8d;
  margin-right: 20rpx;
}
.confirm-btn {
  background-color: #3498db;
  color: #fff;
}

/* 弹窗样式 */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-container {
  width: 680rpx;
  background-color: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
  animation: modalFadeIn 0.3s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.modal-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}
.close-modal {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-body {
  padding: 30rpx;
}
.form-group {
  margin-bottom: 30rpx;
}
.form-label {
  display: block;
  font-size: 28rpx;
  color: #555;
  margin-bottom: 16rpx;
}
.select-school {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #f9f9f9;
}
.select-value {
  flex: 1;
}
.select-arrow {
  margin-left: 12rpx;
}
.form-input {
  height: 80rpx;
  padding: 0 24rpx;
  border: 1rpx solid #eee;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  background-color: #f9f9f9;
}
.modal-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}
.modal-cancel, .modal-confirm {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  border: none;
}
.modal-cancel {
  color: #7f8c8d;
  background-color: #fff;
  border-right: 1rpx solid #eee;
}
.modal-confirm {
  color: #fff;
  background-color: #3498db;
}

/* 学校选择弹窗 */
.school-select-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.school-select-container {
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  max-height: 70vh;
  overflow-y: auto;
  animation: selectFadeIn 0.3s ease-out;
}
@keyframes selectFadeIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.select-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.select-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}
.close-select {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.school-list {
  max-height: calc(70vh - 100rpx);
  overflow-y: auto;
}
.school-item {
  padding: 28rpx 30rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}
.selected-school {
  color: #3498db;
  background-color: #f5f7fa;
  position: relative;
}
.selected-school::after {
  content: '';
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 36rpx;
  height: 36rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M82.1 25.3c-2.2-2.2-5.8-2.2-8 0L40.9 64.1 25.9 49.1c-2.2-2.2-5.8-2.2-8 0s-2.2 5.8 0 8l19 19c1.1 1.1 2.6 1.6 4 1.6s2.9-.5 4-1.6l41-41c2.2-2.2 2.2-5.8 0-8z' fill='%233498db'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
</style>
